<template>
	<view class="item u-p-t-26 u-p-l-26 u-p-r-26 bgw">
		<view class="u-flex u-m-b-28">
			<u-avatar :src="baseImgUrl+detail.user.avatar" size="60" v-if="detail.user.avatar"></u-avatar>
			<u-avatar :src="defaultAvatar" size="60" v-else></u-avatar>
			<view class="u-flex-1 u-m-l-12">
				<view class="" v-if="detail.user">
					{{hidePhone(detail.user.phone)}}
				</view>
				<view class="u-flex ">
					<view class="u-flex-1">
						<u-rate :count="5" v-model="detail.starLevel" active-icon="star-fill" inactive-icon="star-fill"
							active-color="#FFB41A" inactive-color="#E8E8EA" disabled size="24"></u-rate>
					</view>
					<view class="u-font-24 u-tips-color">
						{{detail.created}}
					</view>
				</view>
			</view>
		</view>
		<view class="u-m-b-28">
			{{detail.content}}
		</view>
		<view style="margin: 0 -10upx;" v-if="detail.images">
			<u-row gutter="20">
				<template v-for="(v,i) in detail.images">
					<u-col span="4" v-if="i<3">
						<div class="img-item-wrap" @click="imgClick(i)">
							<view class="img-item-bg" v-if="i == 2"></view>
							<view class="img-item-text" v-if="i == 2">
								共{{detail.images.length}}张
							</view>
							<!-- <image class="img-item" src="https://imgzh.kmmyxb.cn/fcjy/2024/11/18/pic_20241107193206_16198%20(1).jpg" mode="aspectFill"></image> -->
							<image class="img-item" :src="baseImgUrl + v.imagePath" mode="aspectFill"></image>
						</div>
					</u-col>
				</template>

			</u-row>
		</view>
		<u-line color="#F4F4F4" v-if="border" />
	</view>
</template>
<script setup>
	import {
		ref,
		computed,
		getCurrentInstance
	} from 'vue'
	const {
		proxy,
	} = getCurrentInstance()
	const {
		baseImgUrl,
		defaultAvatar
	} = proxy
	const {
		nav,
		navLogin,
		modal,
		hidePhone
	} = proxy.$util;
	const props = defineProps({
		detail: {
			type: Object,
			default: {},
		},
		border: {
			type: Boolean,
			default: true,
		}

	})
	const imgClick = (i) => {
		let urls = props.detail.images.map(v => baseImgUrl + v.imagePath);
		uni.previewImage({
			current: urls[i],
			urls: urls,
			showmenu: false
		});
	}
</script>

<style lang="scss" scoped>
	.item {
		position: relative;
	}

	.item-img-wrap {
		width: 136upx;
		height: 136upx;
		min-width: 136upx;
		border-radius: 10upx;
		overflow: hidden;

		image {
			width: 136upx;
			height: 136upx;
		}
	}
	.img-item-wrap{
		position: relative;
		display: block;
		width: 100%;
		height: 218upx;
		border-radius: 10rpx;
		margin-bottom: 28upx;
		overflow: hidden;
		.img-item-bg{
			position: absolute;
			top: 0;
			left: 0;
			content: " ";
			width: 100%;
			height: 100%;
			opacity: 0.4;
			background-color: #000000;
			z-index: 9;
		}
		.img-item-text{
			position: absolute;
			top: 50%;
			left: 0;
			width: 100%;
			margin-top: -15upx;
			line-height: 30upx;
			z-index: 9;
			color:#ffffff;
			text-align: center;
		}
	}

	.img-item {
		position: relative;
		display: block;
		width: 100%;
		height: 218upx;
	}
</style>